<template>
  <div
    ref="Level1outlineRef"
    :id="'Level1outline' + props.info.id"
    class="levle-1 jy-style-height outlineClassName"
    :class="getId() == 615265577537605 && 'levleStyle11'"
    :style="{
      background: getBackground,
    }"
  >
    <!-- 背景动画组件 -->
    <Gifanim :index="props.indexs" :dom-show="props.isShow" :info="props.info"></Gifanim>
    <div
      class="Outline-box outlineClassName"
      :data-user-id="props.info.id"
      :data-user-type="1"
      :data-user-url="props.info.audio ? props.info.audio.url : ''"
      @contextmenu.stop="onContextMenu($event)"
      :id="'Outline-box' + props.info.type"
      :class="(indexs == 5 || indexs == 6) && commonStore.templateId == 568727972499525 && 'Outline-margin'"
    >
      <!-- <Outline :info="props.info" :domShow="store.previewModuleIndex!==1?true:domShow" :index="indexs" /> -->
      <Outline :info="props.info" :domShow="domShow" :index="indexs" />
      <FlotMenu
        :selectInfo="props.info.type"
        v-if="!route.meta.loopType"
        :childId="props.level1Id"
        :indexs="-1"
        :contextmenuExhibitId="-1"
        :materialType="1"
        :AuxiliaryId="-1"
      />
    </div>
    <draggableList :childId="props.level1Id" :info="props.info" :domShow="domShow" />
    <Auxiliary
      :domShow="domShow"
      :level1Id="props.level1Id"
      :AuxiliaryId="index"
      :info="item"
      :indexs="index"
      v-for="(item, index) in props.info.auxiliaryList"
      :key="item.id"
    />
    <div class="levle-1-child jy-style-height" v-if="props.info.children && props.info.children.length > 0">
      <Level2outline
        :domShow="domShow"
        :level1Id="props.level1Id"
        :level2Id="item.id"
        :info="item"
        :indexs="index"
        v-for="(item, index) in props.info.children"
        :key="item.id"
      />
    </div>
    <div class="style11Gif" v-if="(indexs == 2 || indexs == 3) && getId() == 615265577537605">
      <img
        class="poster"
        v-if="indexs == 2"
        :style="{ opacity: videoReady1 ? 0 : 1 }"
        src="https://static.jiyi.show/free/style11/poster1.png"
        alt=""
      />
      <img
        class="poster"
        v-if="indexs == 3"
        :style="{ opacity: videoReady2 ? 0 : 1 }"
        src="https://static.jiyi.show/free/style11/poster2.png"
        alt=""
      />
      <video
        ref="Style11VideoRef1"
        v-if="indexs == 2"
        :src="publicUrls + 'free/style11/styleAnim1.mp4?imageView2'"
        :loop="true"
        :autoplay="true"
        preload="auto"
        playsinline
        @loadeddata="handleVideoLoaded1"
        @paly="handleVideoLoaded1"
        :style="{ opacity: videoReady1 ? 1 : 0 }"
      ></video>
      <video
        :muted="true"
        ref="Style11VideoRef2"
        v-if="indexs == 3"
        :src="publicUrls + 'free/style11/styleAnim2.mp4?imageView2'"
        :loop="true"
        :autoplay="true"
        preload="auto"
        playsinline
        @loadeddata="handleVideoLoaded2"
        @paly="handleVideoLoaded2"
        :style="{ opacity: videoReady2 ? 1 : 0 }"
      ></video>
      <div v-if="indexs == 2" class="items-title">修复后的中山舰</div>
      <div v-if="indexs == 3" class="items-title">修复后的长江舰</div>
    </div>
  </div>
</template> 
 
<script setup lang="ts">
// @ts-nocheck
import { isElementInViewportOrNearby } from '@/utils/setmaterialStyle';
import { getExhibitionItem } from '@/material/index';
import Auxiliary from '@/freeComponents/Auxiliary/index.vue';
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
  publicUrls,
} from '@/utils/minxin';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import Level2outline from '../Level2outline/Level2outline.vue';
import draggableList from '../draggableComponents/draggableList.vue';
import { ref, nextTick, watch, computed, provide, onMounted } from 'vue';
import { commonDataStore, useProjectStore } from '@/store';
import { childItemMenuShow } from '@/hooks/menuHooks';
import Outline from './Outline/Index.vue';
import { useRoute } from 'vue-router';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';
import { moduleInfo } from '@/api/desgin/desgin';
import getId from '@/utils/getId';
import Gifanim from './Gif/index.vue';

// const themeObject = ref(

// );

// provide('themeObject', themeObject);
const commonStore = commonDataStore();
const Level1outlineRef = ref();
const route = useRoute();
const timer = ref();
const domShow = ref(false);
const dShowroomList = ref([]);
const store = useProjectStore();
const videoReady1 = ref(false);
const videoReady2 = ref(false);
const Style11VideoRef1 = ref(null);
const Style11VideoRef2 = ref(null);
const props = defineProps({
  isShow: {
    type: Boolean,
  },
  info: {
    type: Object,
  },
  indexs: {
    type: Number,
  },
  level1Id: {
    type: Number,
  },
  scrollDom: {
    type: Object,
  },
});
provide('DomisShow', props.isShow);
const onContextMenu = (e: any) => {
  e.preventDefault();
  console.log('111111111111');
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.level1Id;
  store.contextmenuGroupId = -1;
  store.contextmenuExhibitId = -1;
  store.materialType = 1;
  childItemMenuShow(e);
};
const getDomIsshow = () => {
  let result = isElementInViewportOrNearby(Level1outlineRef.value, props.scrollDom, store.homeScrollLeft);
  domShow.value = result;
  //  console.log(domShow.value);
  // return result;
};
if (props.indexs === 0) {
  nextTick(() => {
    // domShow.value = true;
  });
} else {
  domShow.value = false;
}
// const info = async () => {
//   let res = await moduleInfo(props.info.id);
//   dShowroomList.value.push(res.data.digitalShowroom);
//   console.log(dShowroomList.value);
// };
// info();

const handleVideoLoaded1 = () => {
  setTimeout(() => {
    videoReady1.value = true;
  }, 500);
};
const handleVideoLoaded2 = () => {
  setTimeout(() => {
    videoReady2.value = true;
  }, 500);
};

const getBackground = computed(() => {
  if (
    (commonStore.templateId == 568727972499525 && store.styleInfo?.backgroundImage === null) ||
    store.styleInfo?.backgroundImage === publicUrls + 'free/sceneBackground/freeBg2-1.png' + '?imageView2/3/format/webp'
  ) {
    if (props.indexs === 5) {
      return `url(${publicUrls + 'free/sceneBackground/freeBg2-2.png' + '?imageView2/3/format/webp'})`;
    }
  }
  if (
    (commonStore.templateId == 581876609753157 && store.styleInfo?.backgroundImage === null) ||
    store.styleInfo?.backgroundImage === publicUrls + 'free/sceneBackground/freeBg31.png' + '?imageView2/3/format/webp'
  ) {
    if ((props.indexs + 1) % 2 == 0) {
      return `url(${publicUrls + 'free/sceneBackground/freeBg32.png' + '?imageView2/3/format/webp'})`;
    } else {
      // return `url(${publicUrls + 'free/sceneBackground/freeBg32.png' + '?imageView2/3/format/webp'})`;
    }
  }

  if (getId() == 615265577537605) {
    switch (props.indexs) {
      case 0:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle1.png' + '?imageView2/3'})`;
      // case 1:
      //   return `url(${publicUrls + 'free/style11/Level1outlineStyle2.png' + '?imageView2/3'})`;
      case 1:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle3.png' + '?imageView2/3'})`;
      case 2:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle4.png' + '?imageView2/3'})`;
      case 3:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle5.png' + '?imageView2/3'})`;
      case 4:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle6.png' + '?imageView2/3'})`;
      case 5:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle7.png' + '?imageView2/3'})`;
      default:
        return `url(${publicUrls + 'free/style11/Level1outlineStyle1.png' + '?imageView2/3'})`;
    }
  } else if (commonStore.templateId == 621784378253381) {
    if (props.indexs <= 2) {
      return `url(${publicUrls + 'free/sceneBackground/freeBg11-1.png' + '?imageView2/3/format/webp'})`;
    }
    if (props.indexs >= 3) {
      return `url(${publicUrls + 'free/sceneBackground/freeBg11-2.png' + '?imageView2/3/format/webp'})`;
    }
  } else if (commonStore.templateId == 643443922464837 && !store.styleInfo.backgroundImage) {
    if (props.indexs % 2 === 0) {
      return `url(${publicUrls + 'free/style13/freeBg13-3.png' + '?imageView2/3/format/webp'})`;
    } else {
      return `url(${publicUrls + 'free/style13/freeBg13-4.png' + '?imageView2/3/format/webp'})`;
    }
  }
  return '';
  //  indexs == 5 &&
  //       commonStore.templateId == 568727972499525
});

onMounted(() => {
  if (getId() == 615265577537605) {
    nextTick(() => {
      setTimeout(() => {
        if (Style11VideoRef1.value) {
          Style11VideoRef1.value.play();
        }
        if (Style11VideoRef2.value) {
          Style11VideoRef2.value.play();
        }
      }, 2500);
    });
  }
});

watch(
  () => store.homeScrollLeft,
  () => {
    nextTick(() => {
      getDomIsshow();
      if (getId() !== 615265577537605) {
        const scrollX = store.homeScrollLeft;
        // 视差因子，控制背景移动速度，值越小移动越慢
        const parallaxFactor = 0.1;
        // 计算背景图应移动的位置
        const backgroundPositionX = scrollX * parallaxFactor;

        // 设置背景图的水平位置
        Level1outlineRef.value.style.backgroundPositionX = backgroundPositionX + 'px';
      }
    });
  },
);
</script>       
   
<style scoped lang="less">
.levle-1 {
  transition: all 0.3s ease-out;
  display: flex;
  // padding-right: 100px;
  background-size: auto 100% !important;
  background-repeat: repeat !important;
  position: relative;
  // background-position: center !important;
}
.levleStyle11 {
  background-size: 100% 100% !important;
}

.exhibits-box {
  position: relative;

  margin-right: 30px;
  border: 1px solid #e62b17;
  padding: 0 20px;
}
.levle-1-child {
  display: flex;
  width: auto;
}
.Outline-margin {
  margin-left: -122px;
}
.Outline-box {
  position: relative;
  // margin-right: 280px;
}
.Outline-box:hover {
  :deep(.flot-menu) {
    display: flex;
    top: 18px !important;
    z-index: 999;
  }
}

.style11Gif {
  width: 610px;
  height: 456px;
  margin-right: 80px;
  margin-top: 20px;
  background: url(https://static.jiyi.show/free/style11/style11VideoBg.png?imageView2) no-repeat top/100% auto;
  position: relative;
  display: flex;
  align-items: end;
  position: relative;
  .poster {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 455px;
    height: 251px;
    transition: all 0.3s;
    object-fit: cover;
  }
  video {
    width: 455px;
    height: 251px;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    transition: all 0.3s;
  }
}

.items-title {
  width: 100%;
  height: 58px;
  margin-bottom: 60px;
  font-family: SourceHanSerifCN-Bold;
  font-size: 18px;
  color: #ffecc3;
  text-shadow: 0px 1px 1px rgba(133, 121, 104, 0.6);
  line-height: 32px;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#Outline-box11002 {
  :deep(.flot-menu) {
    left: 300px;
  }
}
#Outline-box11001 {
  :deep(.flot-menu) {
    left: 400px;
  }
}
#Outline-box11003 {
  :deep(.flot-menu) {
    left: 380px;
  }
}
#Outline-box31001 {
  :deep(.flot-menu) {
    left: 245px;
  }
}
#Outline-box31002 {
  :deep(.flot-menu) {
    left: 265px;
  }
}
#Outline-box31003 {
  :deep(.flot-menu) {
    left: 265px;
  }
}
#Outline-box51001 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box51002 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box51003 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box51004 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box51005 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box51006 {
  :deep(.flot-menu) {
    left: 355px;
  }
}
#Outline-box71001 {
  :deep(.flot-menu) {
    left: 305px;
  }
}
#Outline-box71002 {
  :deep(.flot-menu) {
    left: 335px;
  }
}
#Outline-box71003 {
  :deep(.flot-menu) {
    left: 355px;
  }
}
#Outline-box81001 {
  :deep(.flot-menu) {
    left: 255px;
  }
}
#Outline-box101001 {
  :deep(.flot-menu) {
    left: 385px;
  }
}
#Outline-box101002 {
  :deep(.flot-menu) {
    left: 355px;
  }
}
#Outline-box101003 {
  :deep(.flot-menu) {
    left: 355px;
  }
}
#Outline-box121001 {
  :deep(.flot-menu) {
    left: 265px;
  }
}
#Outline-box151001 {
  :deep(.flot-menu) {
    left: 300px;
  }
}
#Outline-box151002 {
  :deep(.flot-menu) {
    left: 380px;
  }
}
#Outline-box151003 {
  :deep(.flot-menu) {
    left: 300px;
  }
}
#Outline-box101004 {
  :deep(.flot-menu) {
    left: 330px;
  }
}
#Outline-box171002 {
  :deep(.flot-menu) {
    left: 300px;
  }
}
</style>